import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Setting.css'

export default function Setting() {
  const navigate = useNavigate()
  const [user, setUser] = useState({
    img: '../head.jpg',
    username: '暴龙战士',
    phone: '138****8888'
  })
  return (
    <div className='setting'>
      <div className="setting-header">
        <h1>设置</h1>
        <span onClick={() => { navigate(-1) }}>&lt;</span>
      </div>
      <div className="setting-content">
        <div className="content-userdata">
          <div className="user-img">
            <p>头像</p>
            <img src={user.img} alt="" />
            <span>&gt;</span>
          </div>
          <div className="user-name" onClick={() => { navigate('/Resetname') }}>
            <p>昵称</p>
            <span>{user.username}</span>
          </div>
          <div className="user-phone" onClick={() => { navigate('/Resetphone') }}>
            <p>手机号码</p>
            <span>{user.phone} &gt;</span>
          </div>
          <div className="user-uppsd" onClick={() => { navigate('/Resetpsd') }}>
            <p>修改密码</p>
            <span>&gt;</span>
          </div>
        </div>
        <div className="content-push">
          <div className="push">
            <p>推送设置</p>
            <span>&gt;</span>
          </div>
        </div>
        <div className="content-order">
          <div className="order">
            <p>清除缓存</p>
            <span>&gt;</span>
          </div>
          <div className="order">
            <p>查看更新</p>
            <span>&gt;</span>
          </div>
          <div className="order">
            <p>注销账户</p>
            <span>&gt;</span>
          </div>
          <div className="order">
            <p>关于我们</p>
            <span>&gt;</span>
          </div>
        </div>
        <div className="exit">
          <p>退出登录</p>
        </div>
      </div>
    </div>
  )
}
